<template>
  <div>
    <div class="table">
      <el-table
        :data="stu"
        :header-cell-style="{ backgroundColor: '#00B4D422', color: '#000' }"
        :row-style="tableRowClassName"
        :height="450" 
        :fit="true"
      >
        <el-table-column prop="stuName" label="姓名"/>
        <el-table-column prop="stuId" label="学号" />
        <el-table-column prop="sex" label="性别" >
          <template #default="{row}">
          {{ row.sex== 1 ?'男':row.sex==2?'女':'未知' }}
          </template>
        </el-table-column>
        <el-table-column prop="college" label="学院" />
        <el-table-column prop="profession" label="专业" />
        <el-table-column prop="buildId" label="楼栋" />
        <el-table-column prop="dormitory" label="寝室号" />
        <el-table-column prop="bed" label="床位(号)" />
        <el-table-column prop="email" label="邮箱" />
        <el-table-column prop="phone" label="电话" />
        <el-table-column prop="createTime" label="创建时间" >
          <template #default="{row}">
          {{ new Date(row.createTime).toLocaleDateString() }}
          </template>
        </el-table-column>
        <el-table-column prop="updateTime" label="近期访问时间" >
          <template #default="{row}">
          {{ new Date(row.updateTime).toLocaleDateString() }}
          </template>
        </el-table-column>
      
     
      </el-table>
    </div>

    <!-- 分页 -->
    <el-row class="pagination">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="pageSizes"
        small="small"
        :background="true"
        layout="total, sizes, prev, pager, next"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-row>
  </div>
</template>

<script setup>
import { getStu } from "@/utils/axios/domiRequests";
import { getStuOneBuild } from "@/utils/axios/getTotal";
import { ref, reactive,onMounted } from "vue";
import { useUserStore } from "@/stores/userStore";

const {userInfo}=useUserStore()
const currentPage = ref(1);
const pageSize = ref(10);
const pageSizes = reactive([10, 20, 30]);

defineProps(['stu','total'])
const $emit=defineEmits(["change"])


// 换房信息

const handleSizeChange = async(val) => {
  let {data}=await getStu({currentPage:currentPage.value,buildId:Number.parseInt(userInfo.buildId),pageSize:val})
  $emit("change",{data})
};
const handleCurrentChange = async(val) => {
  let {data}=await getStu({currentPage:val,buildId:Number.parseInt(userInfo.buildId),pageSize:pageSize.value})
  $emit("change",{data})

};



// 添加表格样式
const tableRowClassName = ({ row, rowIndex }) => {

  if (rowIndex % 2 === 1) {
    return { backgroundColor: "#00B4D411" };
  }
  return "";
};

// 加载数据
onMounted( async()=>{
  let {data}=await getStu({currentPage:currentPage.value,buildId:Number.parseInt(userInfo.buildId),pageSize:pageSize.value})
  let res=await getStuOneBuild({buildId:Number.parseInt(userInfo.buildId)})
  $emit("change",{data,tota:res.data})

})

</script>

<style scoped lang="sass">
.btn
  background: rgb(0,202,237)
  color: #ffff
.header
  margin-bottom: 20px

</style>
